{extend name="../../public/admin"}
{block name="title"}数据字典{/block}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/admin/css/index.dictionaries.css">
{/block}
{block name="body"}
<div id="container">


    <div class="clearfix"></div>
    <div style="height: 20px;"></div>
    <div class="table-responsive" id="header">
        <table class="table table-bordered table-hover" v-cloak>
            <thead>
            <tr class="active">
                <th colspan="12" class="text-left">
                    <a href="javascript:;" @click="text()" class="btn btn-info btn-sm"><i class="fa fa-plus"></i> {:lang('添加')}</a>
                    <span>
                        &nbsp;总费用 {{sum.toFixed(2)}} &nbsp;&nbsp;&nbsp;
                        总支付 {{chu.toFixed(2)}}&nbsp;&nbsp;&nbsp;
                        总未付 {{(sum-chu).toFixed(2)}}
                    </span>
                    <span class="fa-pull-right">总 <strong>{{list.length}}</strong> 条</span>
                </th>
            </tr>
            <tr class="active">
                <th>{:lang('序号')}</th>
                <th>{:lang('手续名称')}</th>
                <th>{:lang('办理手续文号')}</th>
                <th>{:lang('开具证明单位')}</th>
                <th>{:lang('办理费用')}</th>
                <th>{:lang('是否支付')}</th>
                <th>{:lang('未支付费用')}</th>
                <th>{:lang('描述')}</th>
                <th>{:lang('状态')}</th>
                <th>{:lang('操作')}</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(key,index) in list">
               <tr>
                   <td>{{index+1}}</td>
                   <td>{{key.staname}}</td>
                   <td>{{key.staindex}}</td>
                   <td><a href="javascript:;" onclick="loock_img($(this))" :data-img="key.stacompany_img" title="查看证据">{{key.stacompany}}</a></td>
                   <td>{{key.stamoney}}</td>
                   <td>
                       <a href="javascript:;" title="查看证据" @click="loca('/admin/count/loock/on/true/id/'+key.staid)">
                            {{key.appmoney}}
                       </a>
                   </td>
                   <td>

                       {{(key.stamoney - key.appmoney).toFixed(2)}}

                   </td>
                   <td>{{key.statext}}</td>
                   <td>
                       {{key.stastate == 0?'待办理':key.stastate == 1?'完成':key.stastate == 2?'拒绝':key.stastate == 3?'待审核':'无'}}
                   </td>
                   <td>
                       <template v-if="key.stastate == 0"><!--待办理-->
                             <a href="javascript:;" class="btn btn-xs" title="{:lang('办理')}" @click="url(key.staid)"><i class="fa fa-cog"></i></a>
                       </template>
                       <template v-else-if="key.stastate == 2"><!--拒绝-->
                           <a href="javascript:;" title="{:lang('修改')}" @click="addData(key.staid)"><i class="fa fa-edit"></i></a>
                       </template>
                       <template v-else-if="key.stastate == 3"><!--待审核-->
                           <a href="javascript:;" class="btn btn-xs" title="{:lang('通过')}" @click="up(index,1)"><i class="fa fa-check"></i></a>
                           <a href="javascript:;" class="btn btn-xs" title="{:lang('拒绝')}" @click="up(index,2)"><i class="fa fa-close"></i></a>
                           <a href="javascript:;" title="{:lang('修改')}" @click="addData(key.staid)"><i class="fa fa-edit"></i></a>
                       </template>
                       <template v-else-if="key.stastate == 1">
                           <a href="javascript:;" class="btn btn-xs" title="添加支付" @click="money_add(key.staid)"><i class="fa fa-plus"></i></a>
                           <a href="javascript:;" class="btn btn-xs" title="{:lang('返回到拒绝')}" @click="up(index,2)"><i class="fa fa-mail-reply"></i></a>
                       </template>

                   </td>
               </tr>
            </template>
            </tbody>
        </table>
    </div>
    <div id="Pagination"></div>

</div>
{/block}
{block name="js"}


<script>
    var app = new Vue({
        el: '#container',
        data: {
            list: [],
            sum:0,
            chu:0

        }
    });

    app.url = (url)=>{
        layer.open({
            type:2,
            title:false,
            closeBtn:false,
            area:['100%','100%'],
            content:"{:url('procedures',['on'=>'true'])}?id="+url
        })
    }
    app.loca = (url)=>{
        layer.open({
            type:2,
            title:false,
            closeBtn:false,
            area:['100%','100%'],
            content:url,
            end:function () {
                get_data()
            }
        })
    }

    //审核
    app.up =(i,state)=>{
        layer.confirm("{:lang('是否确定')}",function () {
            $.post("{:url('procedures_up')}",{id:app.list[i].staid,state:state},function (da) {
                console.log(da);
                if (da == 1) {
                    layer.msg("{:lang('成功')}",{icon:1,offset:'rb'});
                    get_data();
                }
                else{
                    layer.msg("{:lang('失败')}",{icon:2,offset:'rb',end:function () {
                            //location.reload();
                        }});
                }
            })
          /*  app.list[i].state = state;*/
        })
    }
    app.text = ()=>{
        layer.prompt({
            title:'请输入名称',
            formType:3
        },function (val,i) {
            $.post("{:url('procedures_name')}",{name:val,id:{$Request.param.id},type:{$Request.param.type}},function (da) {
                if (da == 1) {
                    layer.closeAll();
                    get_data();
                    layer.msg("{:lang('成功')}",{icon:1,offset:'rb'});
                }
                else{
                    layer.msg("{:lang('失败')}",{icon:2,offset:'rb'});
                }
            });
        });
    }

    get_data();

    //获取数据
    function get_data() {
        layer.load(1);
        $.get("{:url('count/commencement_formalities',['id'=>$Request.param.id,'type'=>$Request.param.type])}", function (da) {
            app.list = da;
             app.sum = 0;
             app.chu = 0;
            $.each(da,function (i,n) {
                app.sum+=parseFloat(n.stamoney);
                //计算总数
                n.appmoney = n.appmoney == null?0:n.appmoney;
                app.chu+=parseFloat(n.appmoney);
            });

            layer.closeAll();
        });
    }

    //查看图片
    app.imgLock = (url)=>{
        layer.open({
            type:2,
            title:'查看文件',
            shift:'3',
            area:['100%','100%'],
            content:url
        })
    }


    //添加详细支付
    app.money_add = (id) => {
        layer.open({
            type:2,
            area:['500px','500px'],
            content:"{:url('money_info')}?id="+id
        })
    }



    //添加内容
    app.addData = (id) => {
        layer.open({
            type:2,
            area:['100%','100%'],
            title:false,
            closeBtn:false,
            content:"{:url('count/procedures',['on'=>'true'])}?id="+id
        })
    }
</script>
{/block}